<template>
  <view v-if="notice && action" class="notice-action">
    <!-- 弹框 -->
    <template v-if="noticeType === ActionType.ShowModal">
      <ActionModal
        v-model:show="visible"
        :title="(action as ShowModalAction).title"
        :description="(action as ShowModalAction).description"
        :type="(action as ShowModalAction).descriptionType"
        :alignment="(action as ShowModalAction).descriptionAlign"
        :confirm-text="confirmText"
        :cancel-text="cancelText"
        @link-click="noticeControl.onLinkClick(notice, $event)"
        @landing="noticeControl.onLandingClick"
        @confirm="onModalConfirm"
        @cancel="onModalCancel"
      />
    </template>

    <!-- 拨打电话 -->
    <template v-if="noticeType === ActionType.CallPhone">
      <ActionModal
        v-model:show="visible"
        :title="(action as CallPhoneAction).title"
        :description="(action as CallPhoneAction).description"
        :confirm-text="(action as CallPhoneAction).dismissText"
        @link-click="noticeControl.onLinkClick(notice, $event)"
        @landing="noticeControl.onLandingClick"
        @confirm="noticeControl.contactService((action as CallPhoneAction).phoneNumber)"
      />
    </template>

    <!-- 筒清洁 -->
    <template v-if="noticeType === ActionType.DrumClean">
      <DrumCleanModal
        v-model:show="visible"
        v-model:description="(action as DrumCleanAction).description[0]"
        :control="control"
      />
    </template>
  </view>
</template>
<script setup lang="ts">
import {
  ActionType,
  type ShowModalAction,
  type Notice,
  type NoticeAction,
  type CallPhoneAction,
  ModalType,
  type ModalInfoAction,
  type ModalConfirmAction,
  type ModalDecisionAction,
  type DrumCleanAction,
} from '@/types/notice'
import type { BaseController } from '@/controller/BaseAppliance/definition'
import ActionModal from './components/actionModal.vue'
import DrumCleanModal from '../drumClean/drumCleanModal.vue'
import type { useNoticeControl } from './useNoticeControl'
import {
  NoticeModalAcknowledge,
  NoticeModalDismiss,
  NoticeModalReject,
  NoticeModalCancel,
} from '@/constants/UniEventKeys'

const props = defineProps<{
  show: boolean
  control: BaseController.Control
  notice: Notice | null
  noticeControl: ReturnType<typeof useNoticeControl>
}>()
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'close'): void
}>()

const visible = computed({
  get() {
    return props.show
  },
  set(show) {
    emit('update:show', show)
    !show && emit('close')
  },
})

const action = computed<NoticeAction | null>(() => props.notice?.action || null)
const noticeType = computed<ActionType | null>(() => action.value?.type || null)
const isAcknowledgeModal = computed(() =>
  [ModalType.Acknowledge, ModalType.Decision].includes((action.value as ShowModalAction).modalType)
)
const confirmText = computed(() => {
  return isAcknowledgeModal.value
    ? (action.value as ModalConfirmAction).acknowledgeText
    : (action.value as ModalInfoAction).dismissText
})
const cancelText = computed(() => {
  return isAcknowledgeModal.value ? (action.value as ModalDecisionAction).rejectText || void 0 : void 0
})
function onModalConfirm() {
  if (isAcknowledgeModal.value) {
    acknowledge(props.notice as Notice)
    uni.$emit(NoticeModalAcknowledge, props.notice)
  } else {
    uni.$emit(NoticeModalDismiss, props.notice)
  }
}
function onModalCancel() {
  if (isAcknowledgeModal.value) {
    reject(props.notice as Notice)
    uni.$emit(NoticeModalReject, props.notice)
  } else {
    uni.$emit(NoticeModalCancel, props.notice)
  }
}

/**
 * 确认事件
 */
function acknowledge(notice: Notice) {
  props.control.store.acknowledgeNoticeEvent(notice)
}
function reject(notice: Notice) {
  props.control.store.rejectNoticeEvent(notice)
}
</script>

<style lang="less">
.notice-action {
  text-align: left;
}
.hintLabel {
  text-decoration: underline;
}
</style>
